<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>运营数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="./js/dateUtil.js"></script>
    <link rel="stylesheet" href="./css/welcome.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>

<body>
<div class="title"><p>运营数据分析</p></div>
<div class="father">
    <div class="searchBox layui-form">
        <div class="itemDate">
            <input type="radio" name="date" value="0" title="累计" lay-filter="radio-filter" >
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="1" title="今日" checked lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="2" title="昨日" lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="3" title="本月" lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="4" title="上月" lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="5" title="最近三月" lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="6" title="今年" lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="7" title="去年" lay-filter="radio-filter">
        </div>
        <div class="itemDate">
            <input type="radio" name="date" value="8" title="自定义时间段" lay-filter="radio-filter" disabled>
        </div>
        <div class="itemDate">
            <input  type="text" class="layui-input" name="dateRange"  id="dateSelect" placeholder="查询日期">
        </div>
        <div class="itemDate">
            <button class="layui-btn" lay-submit lay-filter="radio-submit">查询</button>
        </div>
    </div>
</div>



<div class="containerBox">
            <div class="box blueBox">
                <div class="left">
                    <div class="num"> <span id="userNum">0</span></div>
                    <div> <span>用户数</span></div>
                </div>
                <div class="right"> <i class="layui-icon layui-icon-username icon" ></i></div>
            </div>
            <div class="box pinkBox">
                <div class="left">
                    <div class="num"> <span id="memberNum">0</span></div>
                    <div> <span>会员数</span></div>
                </div>
                <div class="right"> <i class="layui-icon layui-icon-user icon" ></i></div>
            </div>
            <div class="box purpleBox">
                <div class="left">
                    <div class="num"> <span id="colonelNum">0</span></div>
                    <div> <span>团长数</span></div>
                </div>
                <div class="right"> <i class="layui-icon layui-icon-group icon" ></i></div>
            </div>
            <div class="box blueBox">
                <div class="left">
                    <div class="num"> <span id="ordersNum">0</span></div>
                    <div> <span>订单数</span></div>
                </div>
                <div class="right"> <i class="layui-icon layui-icon-form icon" ></i></div>
            </div>
            <div class="box pinkBox">
                <div class="left">
                    <div class="num"> <span id="orderMoney">￥0</span></div>
                    <div> <span>销售额</span></div>
                </div>
                <div class="right"> <i class="layui-icon layui-icon-rmb icon" ></i></div>
            </div>
</div>

<div class="containerInfo">
    <div class="InforStatistics">
        <div class="top"><p>商品销售数量排行</p></div>
        <div class="bottom">
            <table id="goods-sales" lay-filter="data-table"></table>
        </div>
    </div>
    <div class="InforStatistics">
        <div class="top"><p>商品销售金额排行</p></div>
        <div class="bottom">
            <table id="goods-money" lay-filter="data-table"></table>
        </div>
    </div>
</div>

<div class="containerInfo">
    <div class="InforStatistics">
        <div class="top"><p>团长订单数量排行</p></div>
        <div class="bottom">
            <table id="colonel-orderNum" lay-filter="data-table"></table>
        </div>
    </div>
    <div class="InforStatistics">
        <div class="top"><p>团长订单金额排行</p></div>
        <div class="bottom">
            <table id="colonel-orderMoney" lay-filter="data-table"></table>
        </div>
    </div>
</div>
<div class="containerInfo" style="width: 1300px;margin: 20px">

<!--
    <div style="display: flex;float: left;width: 650px">
        <div id="main" style="width: 100%;height:300px;" ></div>
    </div>
-->

        <!--订单七日趋势图-->
        <div style="display: flex;float: right;width: 600px;margin-left: 20px">
            <div id="main2" style="width: 90%;height:300px;" ></div>
        </div>

</div>

<div class="containerInfo" style="display: flex;float: right;width: 1200px;margin: 20px">
<div id="main1" style="width: 100%;height:500px;"></div>
</div>
<!--图-->
<!--<script>
  /*  $.ajax({
        type: "GET",
        url: "order/getSevenTurnover",
        success: function (res) {
            console.log(res.data)
            $('#turnover').html(res.data)
        }
    })*/
    $.ajax({
        type: "GET",
        url: "order/goodsSevenDaySalesByOrders",
        success: function (res) {
            console.log(res.data)
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var Ydata = [];
            var Sdata = [];
            // 指定图表的配置项和数据
            option = {
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'value',
                    name:'商品销量',
                    nameTextStyle: {
                        color: "rgba(235, 20, 20, 1)"
                    }
                },
                yAxis: {
                    name:'商品名称',
                    type: 'category',
                    data: Ydata,
                    nameTextStyle: {
                        verticalAlign: "middle",
                        color: "rgba(235, 20, 20, 1)",
                        verticalAlign: "middle",
                    },
                    axisLabel:{
                        show:true,
                        formatter:function(value){
                            var texts=value;
                            if(texts.length>6){ // 具体多少字就看自己了
                                texts=texts.substr(0,8)+'...';
                            }
                            return texts;
                        }
                    },
                },
                series: [
                    {
                        name: '七天销量情况',
                        data: Sdata,
                        //设置柱状图大小
                        barWidth: 20,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true
                        }
                    }
                ],
                legend: {
                    show: true
                },
                animationDuration: 3000,
                animationDurationUpdate: 3000,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear'

            };
            for (let i=0;i<res.data.length;i++){
                var item = res.data[i];
                Ydata.push(item.goodstitle);
                Sdata.push(item.sales);
            }
            console.log(Ydata)
            console.log(Sdata)
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })
</script>-->
<script type="text/javascript">

    $.ajax({
        type: "GET",
        url: "order/getCategoryWeekSales",
        success: function (res) {
            console.log(res)
            var myChart = echarts.init(document.getElementById('main1'));
            var option = {
                title: {
                    text: '商品类别七日销量图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data:res.data[0]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:res.data[1]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'新鲜蔬菜',
                        type: 'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',//如何都是一样的值会导致相同值叠加问题
                        data:res.data[2][0]
                    },
                    {
                        name:'时令水果',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][1]
                    },
                    {
                        name:'乳饮酒水',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][2]
                    },
                    {
                        name:'零食小吃',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][3]
                    },
                    {
                        name:'肉蛋水产',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][4]
                    } ,      {
                        name:'粮油调味',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][5]
                    },
                    {
                        name:'个护美妆',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][6]
                    },
                    {
                        name:'家清纸品',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][7]
                    },
                    {
                        name:'日用百货',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][8]
                    },
                    {
                        name:'绿植花卉',
                        type:'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        // stack: '总量',
                        data:res.data[2][9]
                    }
                ]
            };
            myChart.setOption(option);
        }})
</script>
<script type="text/javascript">

    $.ajax({
        type: "GET",
        url: "order/getSevenOrder",
        success: function (res) {
            console.log("8888888888888888888888888888")
            console.log(res)

            var myChart = echarts.init(document.getElementById('main2'));
            var option = {
                title: {
                    text: '订单七日趋势图'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: res.data.dateList,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: res.data.orderNumList,
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            myChart.setOption(option);
        }})
</script>


<script type="text/html" id="imgtmp">
    <img src="{{d.goodsimg}}" style="width:30px;height: 30px;">
</script>
<script type="text/html" id="colonelImg">
<img src="{{d.avatar}}" style="width:30px;height: 30px;">
</script>
<script>
    layui.use(['form','table','laypage','layer','laydate'], function() {
        var $ = layui.jquery
            ,form = layui.form,table = layui.table,laypage=layui.laypage,layer=layui.layer,laydate=layui.laydate;

        laydate.render({
            elem: '#dateSelect',//指定html中的id
            range:'~' //自定义分割字符
            ,change: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

            }
            ,ready: function(date){
                //前面选择状态的按钮设置为不选择
                // radioDom.checked = false;
                // alert(radioDom)
                // alert(radioDom.checked)
                radioDom.setAttribute("checked", false);
                console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            }
        })
        /*首次进入该页面获取今日数据*/
        $.ajax({
            type: "GET",
            url: "data/getDataByDate/"+getTodayDate(),
            success: function (res) {
                data=res.data;
                console.log(res);
                $('#userNum').html(data.userNum)
                $('#memberNum').html(data.memberNum)
                $('#colonelNum').html(data.colonelNum)
                $('#ordersNum').html(data.ordersNum)
                $('#orderMoney').html("￥"+data.orderMoney)
                table.render({
                    elem: "#goods-sales",
                    height:250,
                    data:data.goodsSalesList,
                    cols: [[
                        {field: "goodstitle", title: "商品名称", align: "center"},
                        {field: "goodsimg", title: "图片", style:"height:40px",align: "center", templet: "#imgtmp"},
                        {field: "sales", title: "销售数量",align: "center", sort:true},
                        {field: "categoryname", title: "类别",align: "center"}
                    ]],
                });
                table.render({
                    elem: "#goods-money",
                    data:data.goodsMoneyList,
                    height: 250,
                    cols: [[
                        {field: "goodstitle", title: "商品名称", align: "center"},
                        {field: "goodsimg", title: "图片",style:"height:40px",align: "center", templet: "#imgtmp"},
                        {field: "dealprice", title: "销售金额",align: "center",sort:true},
                        {field: "categoryname", title: "类别",align: "center"}
                    ]],
                });
                table.render({
                    elem: "#colonel-orderNum",
                    data:data.colonelOrderNumList,
                    height: 250,
                    cols: [[
                        {field: "colonelname", title: "团长", align: "center"},
                        {field: "avatar", title: "头像",width:80, style:"height:40px",align: "center", templet: "#colonelImg"},
                        {field: "orderNum", title: "总订单数",align: "center",sort:true},
                    ]],
                });

                table.render({
                    elem: "#colonel-orderMoney",
                    data:data.colonelOrderMoneyList,
                    height: 250,
                    cols: [[
                        {field: "colonelname", title: "团长", align: "center"},
                        {field: "avatar", title: "头像",width:80, style:"height:40px",align: "center", templet: "#colonelImg"},
                        {field: "orderMoney", title: "总订单金额",align: "center",sort:true},
                    ]],
                });
            }})



        // radio 点击事件
        var radioDom;
        form.on('radio(radio-filter)', function(data){
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            radioDom=elem;
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
            var date="0000-00-00";
            if (value==0){//累计
                date="2";
            }else if (value==1){//今日
                date=getTodayDate();
                // alert(getTodayDate())
            }else if (value==2){//昨日
                date=getYesterdayDate()
                // alert(getYesterdayDate())
            }else if (value==3){//本月
                date=getMonthDate()
                // alert(getMonthDate())
            }else if (value==4){//上月
                date=getLastMonthDate()
                // alert(getLastMonthDate())
            }else if (value==5){//最近三月
                date=getThreeMonthDate()
                // alert(getThreeMonthDate())
            }else if (value==6){//今年
                date=getYear()
                // alert(getYear())
            }else if (value==7){//去年
                date=getLastYear()
                // alert(getLastYear())
            }

            $.ajax({
                type: "GET",
                url: "data/getDataByDate/"+date,
                success: function (res) {
                    var data = res.data;
                    console.log(res);
                    $('#userNum').html(data.userNum)
                    $('#memberNum').html(data.memberNum)
                    $('#colonelNum').html(data.colonelNum)
                    $('#ordersNum').html(data.ordersNum)
                    $('#orderMoney').html("￥"+data.orderMoney)
                    table.render({
                        elem: "#goods-sales",
                        height:250,
                        data:data.goodsSalesList,
                        cols: [[
                            {field: "goodstitle", title: "商品名称", align: "center",width: 120},
                            {field: "goodsimg", title: "图片",width:80, style:"height:40px",align: "center", templet: "#imgtmp"},
                            {field: "sales", title: "销售数量",align: "center",width: 120,sort:true},
                            {field: "categoryname", title: "类别",align: "center",width:120}
                        ]],
                    });
                    table.render({
                        elem: "#goods-money",
                        data:data.goodsMoneyList,
                        height: 250,
                        cols: [[
                            {field: "goodstitle", title: "商品名称", align: "center",width: 120},
                            {field: "goodsimg", title: "图片",width:80, style:"height:40px",align: "center", templet: "#imgtmp"},
                            {field: "dealprice", title: "销售金额",align: "center",width: 120,sort:true},
                            {field: "categoryname", title: "类别",align: "center",width:120}
                        ]],
                    });
                    table.render({
                        elem: "#colonel-orderNum",
                        data:data.colonelOrderNumList,
                        height: 250,
                        cols: [[
                            {field: "colonelname", title: "团长", align: "center"},
                            {field: "avatar", title: "头像",width:80, style:"height:40px",align: "center", templet: "#colonelImg"},
                            {field: "orderNum", title: "总订单数",align: "center",sort:true},
                        ]],
                    });

                    table.render({
                        elem: "#colonel-orderMoney",
                        data:data.colonelOrderMoneyList,
                        height: 250,
                        cols: [[
                            {field: "colonelname", title: "团长", align: "center"},
                            {field: "avatar", title: "头像",width:80, style:"height:40px",align: "center", templet: "#colonelImg"},
                            {field: "orderMoney", title: "总订单金额",align: "center",sort:true},
                        ]],
                    });
                }})

        });

        // 通过表单提交事件，演示 radio 不同状态下的字段结果
        form.on('submit(radio-submit)', function(data){
            var field = data.field; // 获取表单字段值
            // layer.alert(JSON.stringify(field), {
            //     title: '当前填写的字段值'
            // });
            // 此处可执行 Ajax 等操作
            $.ajax({
                type: "GET",
                url: "data/getDataByDate/"+field.dateRange,
                success: function (res) {
                    var data = res.data;
                    console.log(res);
                    $('#userNum').html(data.userNum)
                    $('#memberNum').html(data.memberNum)
                    $('#colonelNum').html(data.colonelNum)
                    $('#ordersNum').html(data.ordersNum)
                    $('#orderMoney').html("￥"+data.orderMoney)
                    table.render({
                        elem: "#goods-sales",
                        height:250,
                        data:data.goodsSalesList,
                        cols: [[
                            {field: "goodstitle", title: "商品名称", align: "center",width: 120},
                            {field: "goodsimg", title: "图片",width:80, style:"height:40px",align: "center", templet: "#imgtmp"},
                            {field: "sales", title: "销售数量",align: "center",width: 120,sort:true},
                            {field: "categoryname", title: "类别",align: "center",width:120}
                        ]],
                    });
                    table.render({
                        elem: "#goods-money",
                        data:data.goodsMoneyList,
                        height: 250,
                        cols: [[
                            {field: "goodstitle", title: "商品名称", align: "center",width: 120},
                            {field: "goodsimg", title: "图片",width:80, style:"height:40px",align: "center", templet: "#imgtmp"},
                            {field: "dealprice", title: "销售金额",align: "center",width: 120,sort:true},
                            {field: "categoryname", title: "类别",align: "center",width:120}
                        ]],
                    });
                    table.render({
                        elem: "#colonel-orderNum",
                        data:data.colonelOrderNumList,
                        height: 250,
                        cols: [[
                            {field: "colonelname", title: "团长", align: "center"},
                            {field: "avatar", title: "头像",width:80, style:"height:40px",align: "center", templet: "#colonelImg"},
                            {field: "orderNum", title: "总订单数",align: "center",sort:true},
                        ]],
                    });

                    table.render({
                        elem: "#colonel-orderMoney",
                        data:data.colonelOrderMoneyList,
                        height: 250,
                        cols: [[
                            {field: "colonelname", title: "团长", align: "center"},
                            {field: "avatar", title: "头像",width:80, style:"height:40px",align: "center", templet: "#colonelImg"},
                            {field: "orderMoney", title: "总订单金额",align: "center",sort:true},
                        ]],
                    });
                }})
            return false; // 阻止默认 form 跳转
        });



    })

</script>
</body>

</html>